<template>
	<div class="gridRoot" 
		 :style="{width: `${width}px`, height: `${height}px`}">
		<!-- 竖线 -->
        <div class="colLine" 
        	 v-for="c in colCount" :key="c" 
         	 :style="{left: `${(c - 1) * size}px`, borderRightColor: `${color}`}"></div>

        <!-- 横线 -->
        <div class="rowLine"
        	 v-for="r in rowCount" :key="r" 
         	 :style="{top: `${(r - 1) * size}px`, borderBottomColor: `${color}`}"></div>
  </div>
</template>

<script lang="ts">
	import { defineComponent, computed } from "vue";

	export default defineComponent({
		name: "Grid",

		props: {
			width: {
				type: Number,
				default: 375,
			},
			height: {
				type: Number,
				default: 667,
			},
			size: {
				type: Number,
				default: 5,
			},
			color: {
				type: String,
				default: "lightblue",
			}
		},

		setup(props) {
			let colCount = computed(() => {
				// console.log("colCount---->", Math.floor(props.width / props.size));
				return Math.floor(props.width / props.size);
			});

			let rowCount = computed(() => {
				// console.log("rowCount---->", Math.floor(props.height / props.size));
				return Math.floor(props.height / props.size);
			});

			let size = computed(() => {
				return props.size;
			});

			return {
				colCount,
				rowCount,
				size,
			};
		}
	});
</script>

<style lang="scss" scoped>
	.gridRoot {
		position: absolute; 
		left: 0; 
		top: 0; 
		right: 0; 
		bottom: 0; 
		z-index: -900;
	}

	.colLine {
		position: absolute; 
		top: 0; 
		bottom: 0; 
		width: 5px; 
		border-right: 0.5px solid lightblue;
	}

	.rowLine {
		position: absolute; 
		left: 0; 
		right: 0; 
		height: 5px; 
		border-bottom: 0.5px solid lightblue;
	}
</style>